import React, {useState, useEffect} from 'react';
import {NavigationFunctionComponent} from 'react-native-navigation';
import {View, ScrollView, RefreshControl} from 'react-native';
import styled from 'styled-components/native';
import {Text, Container, Row, RecommendItem, Flex} from '../components';

import {observer} from 'mobx-react';

import {useGlobal} from '../hooks/useStores';

const Title = styled.View`
  border-left-width: 4px;
  border-left-color: #e70625;
  padding-left: 8px;
  margin: 24px 4px;
`;

const Empty = styled(Flex)`
  height: 60px;
  width: 100%;
`;

interface Props {}
const Home: NavigationFunctionComponent<Props> = observer(({componentId}) => {
  const {loadMyPlaylist, myplaylist}: any = useGlobal();

  const [myList, setMylist] = useState<any[]>([]);
  const [subscribedList, setSubscribedList] = useState<any[]>([]);

  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);
    await loadMyPlaylist();
    setRefreshing(false);
  }, []);

  useEffect(() => {
    setMylist(myplaylist.filter((i: any) => i.subscribed === false));
    setSubscribedList(myplaylist.filter((i: any) => i.subscribed === true));
  }, [myplaylist]);

  return (
    <View>
      <ScrollView
        refreshControl={
          <RefreshControl
            tintColor="#e70625"
            colors={['#e70625']}
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }>
        <Container>
          {myplaylist.length === 0 ? (
            <Empty align="center" justify="center">
              <Text color="rgba(255,255,255,0.6)">
                {refreshing ? '正在加载歌单...' : '现在还没有歌单~'}
              </Text>
            </Empty>
          ) : null}

          {myList.length > 0 ? (
            <Title>
              <Text size={24}>我创建的歌单</Text>
            </Title>
          ) : null}

          <Row
            count={myList.length}
            col={5}
            style={{width: '100%'}}
            wrap="wrap"
            justify="space-between">
            {myList.map((i: any) => (
              <RecommendItem componentId={componentId} key={i.id} detail={i} />
            ))}
          </Row>

          {subscribedList.length > 0 ? (
            <Title>
              <Text size={24}>我收藏的歌单</Text>
            </Title>
          ) : null}

          <Row
            count={subscribedList.length}
            col={5}
            style={{width: '100%'}}
            wrap="wrap"
            justify="space-between">
            {subscribedList.map((i: any) => (
              <RecommendItem componentId={componentId} key={i.id} detail={i} />
            ))}
          </Row>
        </Container>
      </ScrollView>
    </View>
  );
});

Home.options = {
  topBar: {
    title: {
      text: '我的歌单',
    },
  },
};

export default Home;
